<template>
  <div :style="{backgroundImage:`url(${backgroundImage})`}"
       style="height: 100%;width: 100%;background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%">
    <el-form ref="form" :model="user" label-width="80px"
             style="width: 400px;margin:0 auto;padding-top: 10%">
      <div class="title-container">
        <h3 class="title">SpringBoot敏捷开发框架</h3>
      </div>
      <el-form-item label="用户名">
        <el-input v-model="user.name"></el-input>
      </el-form-item>
      <el-form-item label="用户密码">
        <el-input type="password" v-model="user.password"></el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input v-model="verifyCode"></el-input>
        <el-image :src="verifyCodeSrc" @click="RefVerifyCode"></el-image>
      </el-form-item>
      <el-button :loading="loading" type="primary" style="width:280px;margin-bottom:10px;margin-left: 80px"
                 @click="Login">登陆
      </el-button>
      <br>
      <el-button :loading="loading" type="info" style="width:280px;margin-bottom:30px;margin-left: 80px"
                 @click="Register">注册
      </el-button>
      <div class="tips" style="margin-left: 80px">
        <span style="margin-right:20px;">开源协议: GPL</span>
        <span style="margin-right:20px;">系统作者: XiaoZhengRS</span>
      </div>
    </el-form>
  </div>
</template>

<script>
  import userApi from '../api/user'
  import core from '../api/core'

  export default {
    name: "LoginForm",
    data() {
      return {
        user: {
          name: "请输入账号",
          password: "请输入密码"
        },
        verify: false,
        verifyCode: "",
        verifyCodeSrc: this.$cfg.ApiUrl + "verifyCode/verifyCode",
        backgroundImage: this.$cfg.ApiUrl + "v1/file/imgs?file_id=5e9e9372aa1966025a37c985"
      }
    },
    mounted() {
    },
    created() {
    },
    methods: {
      Login() {
        core.verifyCode_is(this.verifyCode, this.$cookies.get("VerifyCode")).then(res => {
          if (res.data) {
            userApi.user_login(this.user.name, this.user.password).then(res => {
              if (res.data.code == 200) {
                //登陆成功
                console.log(res.data.data.token);
                this.$cookies.set("token", res.data.data.token);
                this.$message({
                  message: '恭喜你，登陆成功!',
                  type: 'success'
                });
              } else {
                //登陆失败
                this.$message({
                  message: res.data,
                  type: 'warning'
                });
              }
            })
          } else {
            //验证码错误
            this.$message({
              message: '验证码错误',
              type: 'warning'
            });
          }
        }).catch(res => {
          this.$message({
            message: '验证码错误',
            type: 'warning'
          });
        });
      },
      Register() {
        core.verifyCode_is(this.verifyCode, this.$cookies.get("VerifyCode")).then(res => {
          if (res.data) {
            userApi.user_reg_get(user.name).then(res => {
              if (res.data.data) {
                userApi.user_reg(user.name, user.password).then(res => {
                  this.$message({
                    message: '注册成功!',
                    type: 'success'
                  });
                })
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                });
              }
            })
          } else {
            this.$message({
              message: '验证码错误',
              type: 'warning'
            });
          }
        }).catch(res => {
          this.$message({
            message: '验证码错误',
            type: 'warning'
          });
        })
      },
      RefVerifyCode() {
        this.$router.go(0);
      }
    }
  }
</script>

<style scoped>

</style>
